import styles from "./index.module.scss"
import UploadSvg from "./upload.svg"
import FileSvg from "./file.svg"
import classNames from "classnames";
import {useRef} from "react";


function UploadFile(props: any) {

    const {
        fileList = [
            {
                name: 'food.jpg',
                progress: 0,
                status: 'uploading'
            },
            {
                name: 'food2.jpeg',
                progress: 1,
                status: "ddd"
            }
        ],
        disable = false,
    } = props

    const inputRef = useRef<HTMLInputElement>(null);


    const handleOnCLick = () => {
        if (disable) return;
        if (!inputRef || !inputRef.current) return;
        inputRef.current.value = '';
        inputRef.current.click();
    }

    return <div className={styles.upload}>
        {/*文件上传区域*/}
        <input ref={inputRef} type="file" className={styles.uploadFileInput}/>
        <div className={classNames({
            [styles.uploadFile]: true,
            [styles.uploadFileHover]: true
        })}
             onClick={handleOnCLick}
        >
            <UploadSvg className={styles.uploadSvg}/>
            <span className={styles.uploadText}>拖拽文件到此区域或者<span>点击上传</span></span>
        </div>
        <div className={styles.uploadFileTip}>
            <span className={styles.uploadFileTipText}>
                jpg/png 格式且大小小于 500KB
            </span>
        </div>

        {/*展示已上传的文件区域*/}
        <div className={styles.uploadFileList}>
            {
                fileList.map((item: any, index: number) => {
                    return <div key={index} className={styles.uploadFileItem}>
                        <FileSvg className={styles.fileSvg}/>
                        <div className={styles.uploadFileItemName}>{item.name}</div>
                        <div className={styles.uploadFileItemProgress}>
                            <div className={styles.uploadFileItemProgressBar} style={{width: '50%'}}></div>
                        </div>
                    </div>
                })
            }
        </div>
    </div>
}


export default function Index() {

    return <div style={{padding: 20}}>
        <UploadFile/>
    </div>
}
